<template>
  <a-modal class="paeg-form" v-model:visible="visible" :title="title" @ok="handleOk" :maskClosable="false">
    <a-form :model="formState" :rules="formRules" layout="vertical" ref="form">
      <a-form-item label="页面名称" name="pageName">
        <a-input v-model:value="formState.pageName" placeholder="请输入页面名称" />
      </a-form-item>
      <!-- <a-form-item label="页面标题" name="pageTitle">
        <a-input v-model:value="formState.pageTitle" placeholder="请输入页面标题" />
      </a-form-item> -->
      <a-form-item label="所属母版" name="parentTemplateId">
        <a-select
          v-model:value="formState.parentTemplateId"
          show-search
          placeholder="请选择所属母版"
          :filter-option="filterOption"
          @change="changeSelect"
        >
          <a-select-option v-for="item in motherData" :key="item.id" :value="item.id" :label="item.templateName">{{
            item.templateName
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="页面logo" name="logoPath">
        <ImageSubmit @getImg="getImg" ref="imageRef" :photoList="photoList" fileNumber="1"></ImageSubmit>
      </a-form-item>
      <a-form-item label="页面描述" name="">
        <a-textarea v-model:value="formState.pageDescribe" :rows="4" placeholder="请输入页面描述" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import ImageSubmit from '@/components/ImageSubmit.vue'
import motherboardApi from '@/api/management/motherboard'
/**
 * 页面表单 弹框
 * @author 朱琦
 * @date   时间：2023/1/29
 */

// 表单默认字段
const defaultForm = {
  id: null,
  pageName: null,
  // pageTitle: null,
  parentTemplateId: null,
  logoPath: null,
  pagePath: null,
  pageStatus: 0, // 默认0 为未启用
  pageDescribe: null
}
export default {
  name: 'PaegForm',
  props: {
    // 母版数据
    motherData: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ImageSubmit
  },
  data() {
    return {
      visible: false,
      isAdd: false,
      formState: { ...defaultForm },
      formRules: {
        pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
        // pageTitle: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
        parentTemplateId: [{ required: true, message: '请选择页面母版', trigger: 'change' }]
      },
      photoList: []
    }
  },
  computed: {
    title() {
      const text = this.isAdd ? '新增' : '编辑'
      return text + '页面'
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 点击确定
     */
    handleOk() {
      this.$refs.form.validate().then(res => {
        this.$emit('submit', this.formState, this.isAdd)
      })
    },
    /**
     * 显示弹框
     * @param {Boolean} isAdd 是否是新增
     * @param {Object} data 修改时的数据
     */
    show(isAdd = true, data) {
      this.visible = true
      this.isAdd = isAdd
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.setData(data)
      })
    },
    /**
     * 关闭弹框
     */
    hide() {
      this.visible = false
    },
    /**
     * 设置表单数据
     * @param {Object} data
     */
    setData(data = defaultForm) {
      Object.keys(defaultForm).map(key => {
        this.formState[key] = data[key]
      })
      if (this.isAdd) {
        this.photoList = []
        delete this.formState.id
      } else {
        if (this.formState.logoPath) {
          this.photoList = [
            {
              name: '',
              status: 'done',
              url: this.formState.logoPath
            }
          ]
          delete this.formState.logoPath
        }
      }
    },
    /**
     *  获取图片
     */
    getImg(file, url) {
      file.append('type', 'page') // parent-template:母版图片, component:组件 page:页面

      motherboardApi
        .uploadImage(file)
        .then(async res => {
          if (res.detail) {
            this.$refs.imageRef.fileList = [
              {
                name: '',
                status: 'done',
                url: url
              }
            ]
            this.formState.logoPath = res.detail
          }
        })
        .catch(e => {
          this.$refs.imageRef.fileList = []
          this.message.error('图片上传失败')
        })
    },
    /**
     * select 搜索过滤
     * @param {*} input
     * @param {*} option
     */
    filterOption(input, option) {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    changeSelect(val, option) {
      this.formState.route = val.route
      console.log('改变母版：', val)
    }
  }
}
</script>

<style scoped lang="less">
.paeg-form {
}
</style>
